<template>
	<gui-page ref="guiPage" :customHeader="true">
		<!-- 导航 -->
		<template v-slot:gHeader>
			<nav-bar-custom left-icon="left" :leftType="'1'" @clickLeftBack="clickLeftBack"
				:title="$t('fixedAssets.rawAdjustmentWarehouse')" @clickRight="clickRight"
				scanType="1"></nav-bar-custom>
		</template>

		<template v-slot:gBody>
			<view class="barcodeSplitting" :style="'height: calc(100vh - ' + navHeight + 'px);'">
				<!-- 扫描和库位选择模块 -->
				<view class="custom-form-card">
					<view class="custom-card-title">
						<text class="title-line"></text>
						{{ $t('distributedEnter.barcodeScan') }}
					</view>
					<view class="custom-card-itemTwo" style="padding:10rpx 0 20rpx;">
						<text class="item-info-title" style="width: 180rpx;"><text class="required-color">*</text>{{
							$t('distributedEnter.barcodeScan') }}：</text>
						<uni-easyinput class="uni-mt-5" suffixIcon="scan" v-model="data.barcode" type="search"
							@confirm="confirm" @blur="data.focus = false" :focus="data.focus" @iconClick="iconClick"
							:placeholder="$t('stockManage.pleaseScanCode')">
						</uni-easyinput>
					</view>
					<view class="custom-card-itemTwo" style="padding: 20rpx 0;">
						<text class="item-info-title" style="width: 180rpx;">
							<text class="required-color">*</text>{{ $t('warehousing.libraryBitCode') }}：</text>
						<uni-easyinput class="uni-mt-5" suffixIcon="scan" v-model="data.locationCodes"
							:placeholder="$t('warehousing.scanLocation')" @focus="data.focus = false"
							:focus="!data.focus" @confirm="confirmLocation" @iconClick="iconClickLocation">
						</uni-easyinput>
					</view>
					<view class="custom-card-itemTwo" style="padding: 20rpx 0;">
						<text class="item-info-title"><text class="required-color">*</text>{{
							$t('stockManage.purposeSeat') }}：</text>
						<storageBin ref="storageBinRef" v-model="data.locationId"
							:ignoreLocationCode="data.ignoreLocationCode" class="gui-text-right"
							requestUrl="/api1/wms/CommonLocation/RecommendLocationWareIn"
							:placeholder="$t('distributedEnter.placeholderTextChoose')" :barCode="data.barcode"
							:requestParam="data.requestParam" @setClick="getClick">
						</storageBin>
					</view>
					<view class="custom-card-itemTwo" style="padding: 20rpx 0">
						<text class="item-info-title">{{ $t('translationImage.warehouseSubordinate') }}：</text>
						<input type="text" disabled style="margin: 8rpx 0;text-align: right;" class="gui-form-input"
							v-model="data.warehouseCode" :placeholder="$t('pageTranslation.bringFromBarcode')" />
					</view>
					<view class="custom-card-itemTwo" style="padding: 20rpx 0;">
						<text class="item-info-title">{{ $t('translationImage.currentLocation') }}：</text>
						<input type="text" disabled style="margin: 8rpx 0;text-align: right;" class="gui-form-input"
							v-model="data.currentLocationCode" :placeholder="$t('pageTranslation.bringFromBarcode')" />
					</view>
				</view>
				<!-- card模块 -->
				<!-- <scroll-view :show-scrollbar="false" :scroll-y="true" class="scroll"> -->
				<view v-if="data.scanInfo" class="custom-form-card">
					<uni-collapse v-model="data.value">
						<uni-collapse-item titleBorder="none" :show-animation="true">
							<template v-slot:title>
								<view class="custom-card-title">
									<text class="title-line"></text>
									{{ $t('distributedOut.atPresent') }}
								</view>
							</template>
							<view class="content">
								<view class="custom-card-itemOne">
									<text class="item-info-title">{{ $t('distributedEnter.materialCoded') }}：</text>{{
										data.scanInfo.barcode }}
								</view>
								<view class="custom-card-itemOne">
									<view class="card-item-50">
										<text class="item-info-title">{{ $t('distributedEnter.materialCode')
										}}：</text>{{
												data.scanInfo.materialCode
											}}
									</view>
									<view class="card-item-50">
										<text class="item-info-title">{{ $t('distributedEnter.materialName')
										}}：</text>{{
												data.scanInfo.materialName
											}}
									</view>
								</view>
								<view class="custom-card-itemOne">
									<text class="item-info-title">{{ $t('distributedEnter.materialSpec') }}：</text>{{
										data.scanInfo.materialSpec }}
								</view>
								<view class="custom-card-itemOne">
									<view class="card-item-50">
										<text class="item-info-title">{{ $t('pageTranslation.currentNumbers')
										}}：</text>{{
												data.scanInfo.currentQty }}
									</view>
									<view class="card-item-50">
										<text class="item-info-title">{{ $t('distributedEnter.uom') }}：</text>{{
											data.scanInfo.unit }}
									</view>
								</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				</view>
				<!-- </scroll-view> -->

				<!-- 底部确定按钮 -->
				<view class="page-bottom-box">
					<view class="page-bottomBtn bottomBtn-bgcolor-green" @click="handelCommit">{{ $t('calendar.submit')
					}}
					</view>
				</view>
				<uni-popup ref="alertDialog" type="dialog">
					<uni-popup-dialog :type="data.msgType" :cancelText="$t('translationImage.close')"
						:confirmText="$t('pageTranslation.toSet')" :title="$t('smashRemoval.warmPrompt')"
						content="当前未设置默认仓库，请前往设置" @confirm="dialogConfirm"></uni-popup-dialog>
				</uni-popup>
			</view>
		</template>
	</gui-page>
</template>

<script setup>
import { navigate, navigateBack } from '@/utils/routerSkip.js';
import pdaScan from '@/hooks/pdaScan.js'
import { useStore } from "vuex";
import { DEFAULT_WAREHOUSECODE } from '@/constant/index.js'
import { getDataDictionaryFn } from '@/utils/index.js'
import storageBin from '@/components/storageBinRM.vue'
import comboGrid from '@/components/comboGrid.vue'
import { onShow } from '@dcloudio/uni-app';
import { basPdaOperationLogFn } from '@/utils/index.js';
import { OPERATION_COMMIT, OPERATION_SCAN } from '@/constant/index.js'
import { onBackPress } from '@dcloudio/uni-app';
import { houseLocationChangeNew, selectWmsBarcodeInfoWms, checkLocation, getLocationByForRM, locationOccupyRM, locationOccupyByScanRM, cancelOccupy } from '@/api/api.js'
import { ref, reactive, onMounted, watch, computed, toRaw } from 'vue';

//JS国际化引入
import { useI18n } from 'vue-i18n';
const { t } = useI18n();

components: {
	storageBin,
		comboGrid
}
const navHeight = computed(() => {
	return store.state.navHeight
})

const storageBinRef = ref(null)
const comboGridRef = ref(null)
let store = useStore();
const { scan } = pdaScan()
let alertDialog = ref(null)

let data = reactive({
	isCapacityBool: false,// 是否带容量 默认为false
	msgType: 'warn',
	value: ['0'],
	warehouseCode: uni.getStorageSync(DEFAULT_WAREHOUSECODE) || '',// 设置的默认仓库
	barcode: '', //条码
	barcodeList: [],//条码数组
	warehouseName: '', //所属仓库,
	currentLocationCode: '', //当前库位
	// objectiveSeat:'',//目的库位
	ignoreLocationCode: [], //前端算满的库位
	scanInfo: undefined,// 当前扫码
	locationId: '',//目的库位id
	requestParam: {
		warehouseCode: uni.getStorageSync(DEFAULT_WAREHOUSECODE) || '',// 设置的默认仓库
		barcode: '',
		selectType: 'one',

	},
	locationUseList: [],
	columnRule: {
		column: [{
			label: t('distributedOut.location'),
			name: "locationCode",
		}]
	},
	locationName: '',// 选中库位
	locationCodes: '',
	currentLocationInfo: {},
	focus: true,
	locationList: [],
	materialCode: '', //物料代码
	capacityid: 0, //库位容量id
	prelocationCode: '',// 上个位置
	scanShow: false,//判断第一次扫描且库位没有占用完成

})

onShow(async () => {
	data.warehouseCode = uni.getStorageSync(DEFAULT_WAREHOUSECODE) || ''
	data.requestParam.warehouseCode = uni.getStorageSync(DEFAULT_WAREHOUSECODE) || ''
	if (!data.warehouseCode.length) {
		alertDialogOpen()
	}
	// 如果默认不是RM提示只能去原材料库内调整操作
	if (data.warehouseCode != 'RM') {
		uni.showModal({
			content: t('fixedAssets.acquiesceSkip'),
			showCancel: false,
			title: t('smashRemoval.warmPrompt'),
			confirmText: t('calendar.confirm'),
			success: function (res) {
				if (res.confirm) {
					uni.navigateBack({
						delta: 1
					});
				} else if (res.cancel) {

				}
			}
		});
	}
})

onMounted(() => {
	uni.$on('scancodedate', (itme) => {
		console.log('获取到的code：' + itme.code, data.focus)
		if (data.focus) {
			getCodeLocation(itme.code, 'pda')
		}
		if (data.focus == false) {
			getCode(itme.code, 'pda')
		}
	})

})
const filter = async () => {
	// 查询目的仓库
	let locationCapacity
	// 查询目的仓库
	await getDataDictionaryFn('LocationCapacity').then(res => {
		if (res.code == 0) {
			locationCapacity = res.data
		}
	})
	let bool = locationCapacity.some((item) => {
		return item.value == data.warehouseCode
	})
	data.isCapacityBool = bool
}

const alertDialogOpen = () => {
	uni.showModal({
		content: t('pageTranslation.noDefaultLocation'),
		showCancel: false,
		title: t('smashRemoval.warmPrompt'),
		confirmText: t('pageTranslation.toSet'),
		success: function (res) {
			if (res.confirm) {
				uni.navigateTo({
					url: '/pages/setting/warehouse'
				})
			} else if (res.cancel) {

			}
		}
	});
}

watch(() => data.warehouseCode, (newVal, oldVal) => {
	filter()
}, {
	immediate: true,
	deep: true
});
const dialogConfirm = () => {
	alertDialog.value.close();
	navigate({
		url: '/pages/setting/warehouse'
	})
}

data.barcodeList = computed(() => {
	return store.state.rmWarehouseChangeList
})

// 计算库位逻辑
const calculateLocationCode = (newVal) => {
	let tepData = toRaw(newVal)
	if (!tepData.length) {
		data.scanInfo = undefined
		data.warehouseName = ''
		data.currentLocationCode = ''
	}
	if (!data.scanInfo && tepData.length) {
		data.scanInfo = tepData[0]
		data.warehouseName = tepData[0].warehouseName
		data.currentLocationCode = tepData[0].locationCode
	}
	// 先清空,后续追加
	data.locationUseList.forEach(l => {
		l.barcodeList = []
	})
	// 追加
	tepData.forEach(x => {
		data.locationUseList.forEach(k => {
			if (x.locationId == k.locationCode) {
				k.barcodeList.push(x.barcode)
				k.surplusCapacity = k.currentCapacity - k.barcodeList.length
			}
		})
	})
	if (!data.isCapacityBool) return
	//算满库位变量置空
	data.ignoreLocationCode = []
	// 把前端预算容量算出为0的库位抽出
	data.locationUseList.forEach(x => {
		if (x.surplusCapacity == 0) {
			data.ignoreLocationCode.push(x.locationCode)
		}
	})
}

//把扫描条码变为物料集合的二维数组
watch(() => data.barcodeList, (newVal, oldVal) => {
	calculateLocationCode(newVal)
}, {
	immediate: true,
	deep: true
});

// 用户调起相机扫码
const iconClickLocation = async (type) => {
	data.focus = true
	if (type === 'suffix') {
		let code = await scan()
		getCodeLocation(code, 'scan')
	}
}
// 用户点击键盘上搜索
const confirmLocation = () => {
	data.focus = true
	getCodeLocation(data.locationCodes, 'keydown')
}

// 获取code
const getCodeLocation = (code, type) => {
	if (!data.barcode) {
		uni.showToast({ title: t('pageTranslation.plsScanBarcode'), icon: "none" });
		return;
	}
	data.locationCodes = code
	// 判断扫描的库位是否存在于库位中
	let arr = data.locationList.filter(x => x.locationCode != data.locationCodes)
	if (arr.length) {
		data.locationCodes = ''
		uni.showToast({ title: t('taskList.storageSpace') + data.scanInfo.materialCode, icon: "none" });
		return
	}
}
// 获取选中的库位id
const getClick =async (x) => {
	if (data.locationId == x.locationCode) {
		return; //如果还选当前库位则不用调用再次调用
	}
	var barcodeDataObj = data.barcodeList.filter(e => e.barcode == data.barcode)
	console.log(barcodeDataObj)
	data.currentLocationInfo = x;
	data.locationId = x.locationCode;
	data.locationName = x.locationName;
	if (barcodeDataObj != null && barcodeDataObj.length == 1) {
		for (var i = 0; i < data.barcodeList.length; i++) {
			if (data.barcodeList[i].barcode == data.barcode) {
				//如果重新选择了库位
				if (barcodeDataObj[0].goalLocationCode == data.locationId && data.locationId != '') {
					if (data.capacityid > 0) {
						await cancelOccupy([{
							id: data.capacityid,
							locationCode: data.prelocationCode,
							materialCode: data.materialCode,
							barcode: data.barcode
						}]).then(res => {
							if (res.code == 0) {
								// cancelid = 0
								barcodeDataObj[0].goalLocationCode = ''

							}

						})
					}
				}
				data.capacityid = data.currentLocationInfo.id
				data.prelocationCode = data.currentLocationInfo.locationCode
				data.barcodeList[i].goaLlocationId = data.currentLocationInfo.id
				data.barcodeList[i].goalWarehouseCode = data.requestParam.warehouseCode
				data.barcodeList[i].goalLocationCode = data.currentLocationInfo.locationCode
				data.barcodeList[i].goalLocationName = data.currentLocationInfo.locationName

			}
		}
	}
	// 调用接口 占用库位
	await locationOccupyRM({
		locationName: x.locationName,
		id: x.id,
		locationCode: data.locationId,
		materialCode: data.scanInfo.materialCode,
		barcode: data.barcode
	}).then(res => {
		if (res.code == 0) {
			uni.showToast({ title: t("fixedAssets.descriptionOK"), icon: "success" });
		} else {
			uni.showToast({ title: res.msg, icon: "success" });
		}
	})

}

// 获取选中的库位id
const getRuleClick = (x) => {
	data.currentLocationInfo = x;
	data.locationId = x.locationCode;
	data.locationName = x.locationName
}

// 用户点击扫码图标
const iconClick = async (type) => {
	data.focus = false
	if (type === 'suffix') {
		let code = await scan()
		if (!data.focus) {
			getCode(code, 'scan2')
		}
	}
}
// 用户点击搜索
const confirm = () => {
	data.focus = false
	if (!data.focus) {
		getCode(data.barcode, 'keydown')
	}
}

// 获取code
const getCode = (code, type) => {
	data.barcode = code
	data.requestParam.barcode = code
	// 判斷这个条码是否重复扫描
	let isBind = data.barcodeList.some(x => x.barcode == code);
	if (isBind) {
		uni.showToast({
			title: t('JsInternational.scanned'),
			icon: 'none'
		})
		return
	}
	if (!code) {
		uni.showToast({
			title: t('stockManage.pleaseScanCode'),
			icon: 'none'
		})
		return
	}
	// 扫描条码
	data.scanValue = code
	let parmes = {
		barcode: code,
		barcodeTypeCode: null,
		locationCode: null,
		materialCode: null,
		materialName: null,
		current: 1,
		size: 99999
	}
	selectWmsBarcodeInfoWms(parmes).then(res => {
		try {
			let inputParameter = JSON.stringify(parmes)
			let returnParameter = JSON.stringify(res)
			let operationPicture = '原材料库内调整'
			let callInterface = res.rquestUrl
			let opertionParmes = {
				inputParameter,
				returnParameter,
				operationPicture,
				callInterface,
				responseCode: res.code,//返回状态
				errorMessage: res.msg,//错误信息
				isPass: res.code == 0 ? 'Y' : 'N',//是否成功 Y N
				operationType: OPERATION_SCAN,
				module: 'WMS',
				source: "PDA",
			}
			basPdaOperationLogFn(opertionParmes)
		} catch (error) {
		}
		if (res.code == 0) {
			// 判断扫描的条码物料是否为同一种
			data.materialCode = res.data.records[0].materialCode
			let materialCode = data.barcodeList.some(x => x.materialCode != res.data.records[0].materialCode);
			if (materialCode) {
				uni.showToast({
					title: t('fixedAssets.barcodeDifferent'),
					icon: 'none'
				})
				return
			}
			data.ignoreLocationCode.push(res.data.records[0].locationCode) //原材料调拨需要排除掉本身的库位
			data.scanInfo = res.data.records[0]
			data.warehouseName = res.data.records[0].warehouseName
			data.currentLocationCode = res.data.records[0].locationCode
			if (res.data.records[0].locationCode == data.locationId) {
				data.locationId = ''
				uni.showToast({ title: t('fixedAssets.transferLocation')+'  '+res.data.records[0].locationCode, icon: "none" });
			}
			else {
				data.scanInfo.goalWarehouseCode = data.requestParam.warehouseCode
				data.scanInfo.goaLlocationId = data.currentLocationInfo.id
				data.scanInfo.goalLocationCode = data.currentLocationInfo.locationCode
				data.scanInfo.goalLocationName = data.currentLocationInfo.locationName
			}
			console.log("data.barcodeList.length", data.barcodeList.length)
			if (data.barcodeList.length >= 1) {
				data.currentLocationInfo.residualCapacity = data.currentLocationInfo.residualCapacity == '~' ? 0 : data.currentLocationInfo.residualCapacity
				let parmes = {
					barcode: code,
					wmsMaterialCapacity: data.currentLocationInfo,
					id: data.currentLocationInfo.id,
					locationCode: data.currentLocationInfo.locationCode,
					locationName: data.currentLocationInfo.locationName
				}
				if (data.locationId != '') {
					// 第二次调用换一个接口
					locationOccupyByScanRM(parmes).then(res => {
						try {
							let inputParameter = JSON.stringify(parmes)
							let returnParameter = JSON.stringify(res)
							let operationPicture = '原材料库内调整'
							let callInterface = res.rquestUrl
							let opertionParmes = {
								inputParameter,
								returnParameter,
								operationPicture,
								callInterface,
								responseCode: res.code,//返回状态
								errorMessage: res.msg,//错误信息
								isPass: res.code == 0 ? 'Y' : 'N',//是否成功 Y N
								operationType: OPERATION_SCAN,
								module: 'WMS',
								source: "PDA",
							}
							basPdaOperationLogFn(opertionParmes)
						} catch (error) {
						}
						if (res.code == 0) {
							if (res.data.id != data.currentLocationInfo.id) {
								data.scanInfo.goaLlocationId = res.data.id
								data.scanInfo.goalLocationCode = res.data.locationCode
								data.scanInfo.goalLocationName = res.data.locationName
							}
							judgeBarcode()
						} else {
							uni.showToast({ title: res.msg, icon: "none" });
							//将扫描的条码还是要加到扫描记录里面去
							data.scanInfo.goalWarehouseCode = ''
							data.scanInfo.goaLlocationId = ''
							data.scanInfo.goalLocationCode = ''
							data.scanInfo.goalLocationName = ''
							data.locationId = ''
							data.locationName = ''
							judgeBarcode()
							// store.commit('addRMWarehouseChangeList', data.scanInfo)
						}
					})

				}
				else {
					judgeBarcode()
				}
			}
			else {
				judgeBarcode()
			}
		} else {
			uni.showToast({ title: res.msg, icon: "none" });
		}
	})
}

// 判断 Barcode
const judgeBarcode = () => {
	let isTrue = data.locationUseList.some(x => x.locationCode === data.locationId)
	if (!isTrue) {
		data.locationUseList.push({
			locationCode: data.currentLocationInfo.locationCode, //库位code
			// 
			surplusCapacity: Number(data.currentLocationInfo.residualCapacity) - Number(data.currentLocationInfo.occupyQty), //后端告诉前端容量
			barcodeList: [], //当前库位本次扫描绑定的barcode条码集合
			currentCapacity: Number(data.currentLocationInfo.residualCapacity) - Number(data.currentLocationInfo.occupyQty), //后端容量减去本次扫描绑定条码的剩余容量  前端预算容量
		})
	}
	store.commit('addRMWarehouseChangeList', data.scanInfo)
}

// 提交操作
const handelCommit = () => {
	if (!data.warehouseCode.length) {
		alertDialogOpen()
		return;
	}
	if (!data.barcodeList.length) {
		uni.showToast({
			title: t('stockManage.pleaseScanCode'),
			icon: 'none'
		})
		return
	}
	let tepData = toRaw(data.barcodeList)
	console.log(tepData, '----tepData----')
	// 只会有一个默认仓库 所有默认取扫描数组第一个
	let parmes = {
		barcodeAdjustLocations: []
	}
	tepData.forEach(x => {
		console.log(x, '----x----')
		parmes.barcodeAdjustLocations.push({
			barcodeId: x.id,// 条码的id
			barcode: x.barcode,// 条码
			descLocationId: x.locationId||0,//库位id
			oldLocationCode: x.locationCode,//原始库位code
			descLocationCode: x.goalLocationCode,// 仓库code
			warehouseCode: x.goalWarehouseCode,//仓库code	
			locationName: x.goalLocationName,//库位name
			materialCapacityId: x.goaLlocationId || data.currentLocationInfo.id // 新增库位占用id
		})
	});
	// 添加加载框
	uni.showLoading({
		title: 'loading',
		mask: true
	});
	houseLocationChangeNew(parmes).then(res => {
		try {
			let inputParameter = JSON.stringify(parmes)
			let returnParameter = JSON.stringify(res)
			let operationPicture = '原材料库内调整'
			let callInterface = res.rquestUrl
			let opertionParmes = {
				inputParameter,
				returnParameter,
				operationPicture,
				callInterface,
				responseCode: res.code,//返回状态
				errorMessage: res.msg,//错误信息
				isPass: res.code == 0 ? 'Y' : 'N',//是否成功 Y N
				operationType: OPERATION_COMMIT,
				module: 'WMS',
				source: "PDA",
			}
			basPdaOperationLogFn(opertionParmes)
		} catch (error) {
		}
		if (res.code == 0) {
			//隐藏加载框
			uni.hideLoading();
			//删除已提交的数据
			data.barcode = '' //置空当前条码
			data.locationCodes = ''
			uni.showToast({ title: t('smashRemoval.submitSuccessfully'), icon: "none" });
			store.commit('reactRMWarehouseChangeList')
			if (data.isCapacityBool) {
				storageBinRef.value.restInitData()
			} else {
				comboGridRef.value.restInitData()
			}
		} else {
			uni.showToast({ title: res.msg, icon: "none" });
		}
	})

}

//扫描纪录
const clickRight = () => {
	navigate({
		url: '/pages/barcodeManagement/rawAdjustmentWarehouseRecord'
	})
}

//默认返回 判断清空数据
onBackPress((options) => {
	if (options.from == 'backbutton') {
		backs()
		return true;
	}
})
//导航栏左侧返回
const clickLeftBack = () => {
	backs()
}
const backs = () => {
	if (!data.barcodeList.length) {
		uni.navigateBack({
			delta: 1
		});
		return true
	}
	uni.showModal({
		title: t('smashRemoval.warmPrompt'),
		content: t('materials.unsubmittedDataIn'),
		success: function (res) {
			if (res.confirm) {
				let arrList = []
				console.log(data.barcodeList)
				data.barcodeList.forEach(item => {
					arrList.push({
						locationName:item.locationName,
						locationCode: item.locationCode,
						materialCode: item.materialCode,
						id: item.goaLlocationId,
						barcode: item.barcode
					})
				})
				checks(arrList)
				// store.commit('reactRMWarehouseChangeList')
				// uni.navigateBack({
				// 	delta: 1
				// });
			} else if (res.cancel) {
				console.log('用户点击取消');
			}
		}
	});
}
// 大返回如果没有清空条码就取消占用库位
const checks = (item) => {
	cancelOccupy(item).then(res => {
		if (res.code == 0) {
			store.commit('reactRMWarehouseChangeList')
			uni.navigateBack({
				delta: 1
			});
		} else {
			uni.showToast({ title: res.msg, icon: "none", });
		}
	})
}
</script>

<style lang="scss" scoped>
.barcodeSplitting {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 88rpx);
	// height: 100vh;
}

.distributed-head {
	border-bottom-left-radius: 16rpx;
	border-bottom-right-radius: 16rpx;
}

.scroll {
	flex: 1;
	height: 2rpx;
}

.page-bottom-box {
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
}
</style>
